<template>
  <div class="all">
    <div class="head">
      <div class="headclick" @click="back">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span class="text-large font-600 mr-3">流程维护</span>
      </div>
      <div class="selfclick" @click="self">
        <img src="../../assets/user.png" style="width:25px;" />
      </div>
    </div>
    <div class="main">
      <div class="top">
        <el-select v-model="eType" filterable placeholder="选择事件类型" style="width: 240px">
          <el-option v-for="type in types" :key="type" :label="type" :value="type" />
        </el-select>
        <el-button style="width:140px" type="primary" @click="match">匹配流程</el-button>
      </div>
      <div class="row" style="margin-top:10px">
        <el-button @click="typeform=true;">添加类型</el-button>
        <el-icon style="margin-right:20px" size="30px" @click="addstep = 1; addtype = eType; addForm = true;">
          <CirclePlus />
        </el-icon>
      </div>

      <el-scrollbar height="430px" style="margin-top:5px">
        <br />
        <div v-for="procedure in procedureArr" :key="procedure.procedureID" class="scrollbar-demo-item">
        <div class="row">
          <div>
            <el-icon>
              <Location />
            </el-icon>
            步骤：{{ procedure.steps }}
          </div>
          <el-icon size="25px" @click="updateForm = true; procedureUpdate = procedure;">
            <Edit />
          </el-icon>

        </div>
        <el-icon>
          <List />
        </el-icon>
        <el-text>处理名：{{ procedure.procedureName }}</el-text>

        <br>
        <el-icon>
          <Document />
        </el-icon>
        <el-text>内容:{{ procedure.content }}</el-text><br>
        <div class="row" style="margin-top:15px">
          <el-icon size="20px" @click="addstep = procedure.steps + 1; addtype = procedure.eventType; addForm = true;">
            <CirclePlus />
          </el-icon>
          <el-popconfirm title="你确认要删除吗?"
            @confirm="addstep = procedure.steps + 1; addtype = procedure.eventType; deleteProcedure(addstep, addtype);">
            <template #reference>
              <el-icon size="20px">
                <DeleteFilled />
              </el-icon>
            </template>
          </el-popconfirm>
        </div>
      </div>

      </el-scrollbar>
      <el-icon>
        <Service />
      </el-icon>
      <el-text>客服</el-text>
      <el-dialog v-model="addForm" title="添加步骤" width="300">
        <el-form :model="procedureAdd">
          <el-form-item label="步骤：">
            <el-input v-model="addstep" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="处理名：">
            <el-input v-model="procedureAdd.procedureName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="处理内容：">
            <el-input v-model="procedureAdd.content" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="addForm = false">取消</el-button>
            <el-button type="primary" @click="addProcedure">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="updateForm" title="修改步骤信息" width="300">
        <el-form :model="procedureAdd">
          <el-form-item label="步骤：">
            <el-input v-model="procedureUpdate.steps" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="处理名：">
            <el-input v-model="procedureUpdate.procedureName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="处理内容：">
            <el-input type="textarea" v-model="procedureUpdate.content" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="updateForm = false">取消</el-button>
            <el-button type="primary" @click="updateProcedure">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="typeform" title="添加类型" width="300">
        <el-form :model="procedureAdd">
          <el-form-item label="类型">
            <el-input v-model="Addtype" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="typeform = false">取消</el-button>
            <el-button type="primary" @click="addProcedureType">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, inject } from "vue";
import { ElMessageBox, ElLoading, ElMessage, } from "element-plus";
import { ArrowLeft, CirclePlus, Service, DeleteFilled, Edit, Location, List, Document } from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const axios = inject("axios");
let Addtype=ref('');
let addstep = ref('')
let addtype = ref('')
const type = ref("");
const types = ref([]);
let addForm = ref(false);
let typeform=ref(false)
let updateForm = ref(false);

let procedure = ref({
  eventType: "",
  procedureName: "",
  steps: "",
  content: ""
})
let procedureAdd = ref({
  procedureName: "",
  eventType: "",
  content: ""
});
let procedureUpdate = ref({
  procedureID: "",
  steps: "",
  procedureName: "",
  eventType: "",
  content: ""
})
let procedureArr = ref([])
let eType = ref('');
let typeforadd = ref('');
const addProcedureType=()=>{
  axios
    .post("/Worker/newEventType ", {
      eventType: Addtype.value
    })
    .then(response => {
      if(response.data==1)
      {
        ElMessage({
          message: "添加成功",
          type: "success"
        });
        init();
      }
      else {
        ElMessage({
          message: "添加失败",
          type: "warning"
        });
      }
      typeform.value=false;
    })
    .catch(error => {
      console.log(error);
      ElMessage({
          message: "添加失败",
          type: "warning"
        });
    });
}
const addProcedure = () => {
  axios
    .post("/Worker/addProcedureStep", {
      eventType: addtype.value,
      steps: addstep.value,
      content: procedureAdd.value.content,
      procedureName: procedureAdd.value.procedureName
    })
    .then(response => {
      if (response.data == 1) {
        ElMessage({
          message: "添加成功",
          type: "success"
        });
      }
      else {
        ElMessage({
          message: "添加失败",
          type: "warning"
        });
      }
      init();
      match();
      addForm.value = false;
      procedureAdd.value.procedureName = "";
      procedureAdd.value.content = "";
    })
    .catch(error => {
      console.log(error);
      ElMessage({
        message: "修改失败",
        type: "warning"
      });
    });

}
const match = () => {
  axios
    .post("/Worker/getProcedure ", {
      eventType: eType.value
    })
    .then(response => {
      procedureArr.value = response.data
    })
    .catch(error => {
      console.log(error);
    });

}
const updateProcedure = () => {
  console.log(procedureUpdate.value.content)
  axios
    .post("/Worker/renewProcedureStep", {
      procedureID: procedureUpdate.value.procedureID,
      steps: procedureUpdate.value.steps,
      procedureName: procedureUpdate.value.procedureName,
      content: procedureUpdate.value.content
    })
    .then(response => {
      if (response.data == 1) {
        ElMessage({
          message: "修改成功",
          type: "success"
        });

      }
      else {
        ElMessage({
          message: "修改失败",
          type: "warning"
        });
      }
      init();
      match();
      updateForm.value = false;
    })
    .catch(error => {
      console.log(error);
      ElMessage({
        message: "修改失败",
        type: "warning"
      });
    });
}
const deleteProcedure = (step, type) => {
  axios
    .post("/Worker/deleteProcedureStep", {
      eventType: type,
      steps: step
    })
    .then(response => {
      if (response.data >= 1) {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
      }
      else {
        ElMessage({
          message: "删除失败",
          type: "warning"
        });
      }
      init();
      match();

    })
    .catch(error => {
      console.log(error);
      ElMessage({
        message: "删除失败",
        type: "warning"
      });
    });
}
const init = () => {
  axios
    .post("/Worker/listAllEventType", {
      eventType: eType.value
    })
    .then(response => {
      types.value = response.data

    })
    .catch(error => {
      console.log(error);
    });
}
init();
const refresh = () => {
  init();
};
const back = () => {
  router.go(-1);
};
const self = () => {
  router.push("/workerMainPage/workerSelfPage");
};
</script>

<style scoped>
.head {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.row {
  display: flex;
  justify-content: space-between;
}

.all {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #c5ebe3, #a9c1ed);
  /* 溢出隐藏 */
  overflow: hidden;
}

.scrollbar-demo-item {
  height: 100px;
  margin: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.top {
  display: flex;
  justify-content: space-between;
}

.main {
  margin: 20px;
}
</style>